<div class="page-container">
  <div style="position: relative;" class="pt20">
    <div class="container" fxLayout="row">
      <div fxFlex fxLayoutAlign="start center" fxLayoutGap="16px" id="shopToggelSearch">
        <ng-tree (onChangeCat)="handleUpdated($event)" [option]="option"></ng-tree>
        <mat-radio-group [(ngModel)]="param.shopType" class="mat-primary" (ngModelChange)="shopTypeChange($event)">
          <mat-radio-button value="" [checked]="param.shopType==''" color="primary">全网</mat-radio-button>
          <mat-radio-button value="C店" [checked]="param.shopType=='C店'" color="primary">淘宝</mat-radio-button>
          <mat-radio-button value="商城" [checked]="param.shopType=='商城'" color="primary">天猫</mat-radio-button>
          <mat-radio-button value="天猫国际" [checked]="param.shopType=='天猫国际'" color="primary">天猫国际</mat-radio-button>
          <mat-radio-button value="全球购" [checked]="param.shopType=='全球购'" color="primary">全球购</mat-radio-button>
        </mat-radio-group>
        {{shopType}}
        <mat-button-toggle-group #group="matButtonToggleGroup">
          <mat-button-toggle value="shopName" [checked]="true" (click)="searchType('shopName')">
            <span class="font-size-12">店铺名</span>
          </mat-button-toggle>
          <mat-button-toggle value="nick" (click)="searchType('nick')">
            <span class="font-size-12">旺旺名</span>
          </mat-button-toggle>
        </mat-button-toggle-group>
        <mat-form-field class="mp0" *ngIf="group.value=='shopName'">
          <input matInput placeholder="店铺名搜索" [(ngModel)]="param.shopName" />
          <mat-icon matPrefix fontIcon="fa-search" style="color:rgba(0,0,0,.87);font-size: 18px;"></mat-icon>
        </mat-form-field>
        <mat-form-field class="mp0" *ngIf="group.value=='nick'">
          <input matInput placeholder="旺旺名搜索" [(ngModel)]="param.nick" />
          <mat-icon matPrefix fontIcon="fa-search" style="color:rgba(0,0,0,.87);"></mat-icon>
        </mat-form-field>
        <button mat-raised-button color="primary" (click)="search()">确定</button>
      </div>
    </div>
    <ngx-busy [busy]="busy"></ngx-busy>
    <div class="container mt10">
      <table class="responsive-table bordered highlight" id="shopExport">
        <thead>
          <tr>
            <th *ngFor="let column of columns;let $index = index" st-sort [st-sort]="column" [st-sort-data]="param" (sortChanged)="sortChanged($event)" [innerHTML]="column.title"> </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let shop of vm.table.shops | paginate: { itemsPerPage: param.rows, currentPage: vm.page, totalItems: vm.table.count,id: 'shops_table'};let $index = index;">
            <td>
              <p class="nick-p left-align">
                <span class="taobao-icon" [ngClass]="{'icon-service-tianmao':shop.shopType=='商城','icon-service-taobao':shop.shopType=='C店'||shop.shopType==null,'icon-service-tianmaoguoji':shop.shopType =='天猫国际','icon-fest-quanqiugou':shop.shopType =='全球购'}"></span>
                <span class="text-overflow width180" [title]="shop.shopName"  [innerHTML]="shop.shopName | highlight:param.shopName"></span>
                <!-- taoabao -->
                 <a class="grey-text" title="去淘宝" href="http://store.taobao.com/shop/view_shop.htm?user_number_id={{shop.uid}}" target="_blank" ><i class="fa fa-external-link cp f16"></i></a>
              </p>
            </td>
            <td>{{shop.mainCategory | categoryName}}</td>
            <td>
              <span style="display: none" hidden ng-bind="shop.shopLevelSrc"></span>
              <img src="http://trendata.oss-cn-hangzhou.aliyuncs.com/marketconditions/credit{{shop.shopLevelType}}.png" style="width: 18px;" *ngFor="let i of shop.shopLevels;let $index = index" />
            </td>
            <td>
              {{shop.productCount}}
            </td>
            <!-- 日销 -->
            <td>{{shop.sellMoney || 0 | bigNum}}</td>
            <td>{{shop.sellAmount || 0 | number:'1.0-0'}}件</td>
            <!-- 月销 -->
            <td>{{shop.monthSellMoney || 0 | bigNum}}</td>
            <td>{{shop.monthSellAmount || 0 | number:'1.0-0'}}件</td>
          </tr>
          <tr *ngIf="vm.table.shops.length ==0">
            <td colspan="10" class="center-align">暂无数据</td>
          </tr>
        </tbody>
      </table>

      <pagination-controls class="center-align pt20" id="shops_table" (pageChange)="pageChanged($event)" maxSize="9" directionLinks="true" autoHide="true">
      </pagination-controls>
    </div>
  </div>
</div>
